<template>
  <div class="loginImageModule">
    <span style="margin-left: 10%; color: #3a8f8f">二手物品交易系统</span>
  </div>

  <div class="loginFormModule">
    <div class="formModule">
      <a>系统用户登录</a>
    </div>

    <div class="formModule">
      <span>用户账号：</span>
      <el-input
        v-model="username"
        placeholder="请输入用户账号"
        style="width: 60%"
        clearable
      />
    </div>

    <div class="formModule">
      <span>用户密码：</span>
      <el-input
        v-model="password"
        type="password"
        placeholder="请输入用户密码"
        style="width: 60%"
        clearable
      />
    </div>

    <div class="formModule">
      <el-button
        type="primary"
        style="width: 80%; font-size: 20px; border: 3px solid #3a8f8f; background-color: #3a8f8f"
        @click="manageLogin()"
        >login</el-button
      >
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
import request from "@/request/axios";
import router from "@/router/index.js";
import { ref } from "vue";

export default {
  setup() {
    let username = ref(null);
    let password = ref(null);

    const manageLogin = () => {
      if (username.value != null && password.value != null) {
        request
          .post("/login/manage", {
            adminName: username.value,
            password: password.value,
          })
          .then((res) => {
            if (res.code === "200") {
              localStorage.setItem("user", JSON.stringify(res));
              ElMessage.success("登录成功，欢迎回家");
              router.push("/managestaff");
            } else if (res.code === "600") {
              username.value = "";
              password.value = "";
              ElMessage.error("账户或密码错误");
            }
          });
      } else {
        ElMessage.warning("账号或密码不能为空");
      }
    };

    return {
      username,
      password,
      manageLogin,
    };
  },
};
</script>

<style>
body {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.loginImageModule {
  display: flex;
  font-family: "宋体";
  font-weight: 800;
  font-size: 26px;
  align-items: center;
  width: 100%;
  height: 10vh;
  background-color: #ffffff;
}

.loginFormModule {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #3a8f8f;
  width: 100%;
  height: 90vh;
}

.formModule {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-family: "宋体";
  font-weight: 650;
  font-size: 130%;
  width: 40%;
  height: 8%;
  padding-top: 20px;
  background-color: #ffffff;
}

.formModule a {
  padding-right: 300px;
  font-weight: 600;
  font-size: 25px;
  color: #707070;
  margin-bottom: 5%;
}

@font-face {
  font-family: "阿里妈妈刀隶体 Regular";
  font-weight: 400;
  src: url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/rcApymqESH0c.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/8nkNB4zy4gRH/rBgWeAj3HbTq.woff")
      format("woff");
  font-display: swap;
}
</style>